<template>
  <div class="contract-history-page">
    <!-- 历史版本列表 -->
    <pull-refresh-list
      ref="pullRefreshList"
      :fetch-data="fetchHistoryList"
      :initial-params="params"
      :page-size="10"
    >
      <div slot-scope="{ item, index }" class="history-container">
        <div class="con-box">
          <div class="header">
            <div class="title">{{ item.contractVersion }}</div>
            <div class="times">{{ item.createdTime }}</div>
          </div>
          <div class="history-content">
            <div class="info-row">
              <div class="label">{{ $t('评审单号') }}</div>
              <div class="value">{{ item.number }}</div>
            </div>
            <div class="info-row">
              <div class="label">{{ $t('签署方式') }}</div>
              <div class="value">{{ item.signTypeStr }}</div>
            </div>
            <div class="info-row">
              <div class="label">{{ $t('模版') }}</div>
              <div class="value">{{ item.templateName }}</div>
            </div>
            <div class="info-row">
              <div class="label">{{ $t('实际生效日期') }}</div>
              <div class="value">{{ item.effectiveDate }}</div>
            </div>
            <div class="info-row">
              <div class="label">{{ $t('状态') }}</div>
              <div class="value">{{ item.signStateStr }}</div>
            </div>
          </div>
        </div>

        <div class="action-buttons">
          <button class="view-btn" @click="handleView(item)">
            {{ $t('查看') }}
          </button>
          <button
            class="restore-btn"
            v-if="!item.isCurrent"
            @click="handleRestore(item)"
          >
            {{ $t('恢复') }}
          </button>
        </div>
      </div>
    </pull-refresh-list>
  </div>
</template>
<script>
import { queryContractHistoricalVersion } from '@/api/contract'
import CustomActionSheet from '@/components/CustomActionSheet.vue'
import CommonHeader from '@/components/CommonHeader.vue'
import PullRefreshList from '@/components/PullRefreshList.vue'
import { Toast, Dialog } from 'vant'
import dayjs from 'dayjs'

export default {
  name: 'ContractHistory',
  components: {
    CustomActionSheet,
    CommonHeader,
    PullRefreshList,
  },
  props: {
    contractId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      // 状态定义
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 11, 31),
      // 响应式数据
      showDatePickerPopup: false,
      timeText: this.$t('全部时间'),
      showPopover: false,
      showRestoreConfirm: false,
      currentRestoreItem: null,
      searchKeyword: '',
      activeTab: '-1',
      actions: [
        {
          text: this.$t('全部时间'),
        },
        {
          text: this.$t('近一个月'),
        },
        {
          text: this.$t('近三个月'),
        },
        {
          text: this.$t('近半年'),
        },
        {
          text: this.$t('自定义时间'),
        },
      ],
      // 列表参数
      params: {
        contractNumber: this.$route.query.judgeNumber,
        nowPage: 1,
        pageSize: 10,
        contractVersion: null,
        versionSort: 2,
      },
    }
  },
  watch: {},
  methods: {
    fetchHistoryList() {
      return new Promise((resolve, reject) => {
        queryContractHistoricalVersion(this.params)
          .then((res) => {
            resolve(res)
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
  },
}
</script>
<style scoped>
.contract-history-page {
  padding-bottom: 60px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-bar {
  padding: 10px;
  background-color: #fff;
}

.filter-tabs {
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.chose-time {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.history-container {
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.status-current {
  padding: 4px 8px;
  background-color: #e1f0ff;
  color: #1989fa;
  border-radius: 4px;
  font-size: 12px;
}

.status-history {
  padding: 4px 8px;
  background-color: #f7f7f7;
  color: #999;
  border-radius: 4px;
  font-size: 12px;
}

.history-content {
  padding: 0 15px 10px 15px;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
}

.label {
  width: 80px;
  color: #999;
  font-size: 14px;
}

.value {
  flex: 1;
  color: #333;
  font-size: 14px;
  word-break: break-all;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  padding: 10px 15px;
  border-top: 1px solid #eee;
}

.view-btn {
  height: 30px;
  padding: 0 15px;
  background-color: #f0f0f0;
  color: #666;
  border: none;
  border-radius: 15px;
  font-size: 14px;
  margin-right: 10px;
  cursor: pointer;
}

.restore-btn {
  height: 30px;
  padding: 0 15px;
  background-color: #1989fa;
  color: #fff;
  border: none;
  border-radius: 15px;
  font-size: 14px;
  cursor: pointer;
}

.restore-content {
  padding: 20px 15px;
}

.restore-content p {
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}
.con-box {
  background: #ffffff;
  border-radius: 5px;
}
.times {
  color: #666666;
  font-size: 13px;
}
</style>
